<template>
	<div>
		<el-tree
		  :data="dataList.actionList"
		  show-checkbox
		  node-key="id"
		  ref="tree"
		  highlight-current
		  :render-content="renderContent"
		  :expand-on-click-node="false"
		  @node-expand="nodeExpand"
		  @node-click="nodeClick"
		  :props="defaultProps">
		</el-tree>

		<div class="buttons">
		  <el-button @click="getCheckedNodes">通过 node 获取</el-button>
		  <el-button @click="getCheckedKeys">通过 key 获取</el-button>
		  <el-button @click="setCheckedNodes">通过 node 设置</el-button>
		  <el-button @click="setCheckedKeys">通过 key 设置</el-button>
		  <el-button @click="resetChecked">清空</el-button>
		</div>
		

		<!-- 添加权限对话框 -->
		<el-dialog title="权限添加" :visible.sync="dialog.addActionDialog.open" v-if="dialog.addActionDialog.open">
			<el-form :model="form.addActionFormInfo">
				
				<el-form-item label="名称" :label-width="formLabelWidth" >
			      <el-input v-model="form.addActionFormInfo.name" ></el-input>
			    </el-form-item>

			    <el-form-item label="标志" :label-width="formLabelWidth" >
			      <el-input v-model="form.addActionFormInfo.flag" :label-width="formLabelWidth"></el-input>
			    </el-form-item>

			    <el-form-item label="备注" :label-width="formLabelWidth">
			      <el-input v-model="form.addActionFormInfo.mark" :label-width="formLabelWidth"></el-input>
			    </el-form-item>

			</el-form>

			<div slot="footer" class="dialog-footer">
			    <el-button @click="closeDialog('addActionDialog')">取 消</el-button>
			    <el-button type="primary" @click="dialogBtnOk('addActionDialog')">确 定</el-button>
			  </div>
		</el-dialog>

	</div>



</template>

<script>
import _http from '@/components/common/http.vue'
  	let id = 1000;
  export default {

  	data() {
      return {
      	dataList:{
    	    actionList: [],
	    },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        dialog:{
        	addActionDialog:{
        		open:false
        	}
        },
        form:{
        	addActionFormInfo:{

        		name:'',
        		flag:'',
        		mark:''
        	}
        },
        formLabelWidth:'120px',
        storeInfo:{
        	node:'',
        	store:'',
        	data:[]
        }
      }
    },
  	mounted(){
  		this.getRoleActionList()
  	},
    methods: {
    	openDialog(dialog){
    		this.dialog[dialog].open = true
    	},
    	closeDialog(dialog){
    		this.dialog[dialog].open = false
    	},
		getRoleActionList(){
			_http.axiosRequest(this,'actionList',{type:'select'},(res)=>{
				this.dataList.actionList = res.data
			})
		},
		renderContent(h, { node, data, store }){
			return (
          <span>
            <span>
              <span>{node.label}</span>
            </span>
            <span style="margin-left:20px;">
              <el-button size="small" on-click={ () => this.append(node,store, data) }>添加</el-button>
              <el-button size="small" on-click={ () => this.remove(store, data) }>删除</el-button>
            </span>
          </span>);
		},
		append(node,store, data) {
	        this.storeInfo.store = store
	        this.storeInfo.data= data
	        this.storeInfo.node= node
	        this.openDialog('addActionDialog')
	    },

      	remove(store, data) {
        	store.remove(data);
      	},
      	dialogBtnOk(dialog){
      		if (dialog == 'addActionDialog') {
      			this.addAction(dialog)
      		}
      	},
      	addAction(dialog){
      		if (!this.storeInfo.node.expanded) {
      			this.storeInfo.node.expanded = true
      		}
      		this.storeInfo.store.append({ id: id++, label: this.form.addActionFormInfo.name, children: [] }, this.storeInfo.data);
      		this.closeDialog(dialog)
      	},
      	nodeClick(data,node,vue){
      		
      	},
      	nodeExpand(data,node,vue){
      		
      	},
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes());
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys(true));
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 9,
          label: '三级 1-1-1'
        }]);
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3]);
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([]);
      }
    },

    
  };
</script>